<template>
  <div>
    <el-card>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>会员管理</el-breadcrumb-item>
        <el-breadcrumb-item>会员等级</el-breadcrumb-item>
      </el-breadcrumb>
      <h3>会员等级管理</h3>
    </el-card>
    <!-- 查询和重置 -->
    <el-card>
      <el-row>
        <el-col :span="1.5">
          <div class="grid-con">等级名称:</div>
        </el-col>
        <el-col :span="19">
          <div class="grid-content bg-purple-dark">
            <el-input
              class="ma"
              v-model="input"
              placeholder="请输入内容"
            ></el-input>
          </div>
        </el-col>
        <el-col :span="2.5">
          <div>
            <el-button type="primary" @click="chaxun">查询</el-button>
          </div>
        </el-col>

        <el-col :span="1">
          <div class="add1">
            <el-button @click="cozhi">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <!-- 主要内容 -->
    <el-card>
      <el-row>
        <el-col :span="21">
          <div>标签列表</div>
        </el-col>

        <el-col :span="3">
          <div>
            <el-button type="primary" @click="tiaozhuan">+新建</el-button>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <div>
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="level" label="等级" width="100">
              </el-table-column>
              <el-table-column prop="id" label="等级名称" width="150">
              </el-table-column>
              <el-table-column prop="status" label="成长值"> </el-table-column>

              <el-table-column prop="name" label="等级权益"> </el-table-column>

              <el-table-column prop="package" label="升级礼包">
              </el-table-column>

              <el-table-column prop="rank" label="等级状态">
                <template slot-scope="scope">
                  <el-switch
                    @click="zhuangtai"
                    @change="gchange(scope.row)"
                    v-model="scope.row.rank"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                  >
                  </el-switch>
                  
                  
                </template>
              </el-table-column>

              <el-table-column prop="created" label="最后修改时间">
              </el-table-column>

              <el-table-column prop="e" label="操作">
                <template slot-scope="scope">
                  <el-button @click="chao(scope.row,scope.row.id)" type="text"
                    >编辑</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-card>
      <el-row>
        <el-col :span="24">
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="Change"
              
              :current-page="currentPage4"
              @prev-click='uppage'
              @next-click='nextpage'
              :page-sizes="[5, 10, 15, 20]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<style lang="less" scoped>
.grid-con {
  line-height: 45px;
}
.ma {
  width: 260px;
}
.add1 {
  margin-left: 10px;
}
</style>
<script>
export default {
  data() {
    return {
      input: "",
      total:0,
         page: 1, //页码
       size: 5, //一页多少条数据
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      value: "",
      change: "",
      tableData: [
        {
          level: "lv1",
          id: "普通会员",
          status: "1000-2000",
          name: "专属客服",
          package: "10元优惠价",
          rank: false,
          created: "2020/09/08 10:45",
        },
      ],
    };
  },
  methods: {
    //  //点击事件
   Change(V) {
      this.page = V;
      console.log(1,V);
      this.getCon();
    },
    //上一页
    uppage() {
      this.page--;
      this.getCon();
    },
    //下一页
    nextpage() {
      this.page++;
      this.getCon();
    },
    gchange(){},
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    
    },
    //跳转到配置会员等级
    tiaozhuan() {
      this.$router.push("/home/level-1");
    },
    //重置
    cozhi() {
      // console.log(this.input);
      this.input = "";
    },
    //跳转的编辑会员等级
    chao(aa,row) {
      console.log(row);
      // this.$router.push("/home/level-2");
      this.$router.push({path:"/home/level-2",query:{id:row}});
    },
    //页面渲染s
    getCon() {
      this.$axios({
        url: "/vip/userLevel/list",
        params: {
          page: this.page,
          limit: "5",
          rank:this.name,// 会员权益
          name:this.id,//等级名称
          package:this.package, //等级礼包
          status:this.rank,//状态
          level:this.level,//等级
        },
      }).then((res) => {
        console.log(res);
        if (res.data.code ==0) {
          this.tableData = res.data.data;
          this.total=res.data.count;
        } else {
          this.$message.error("请求失败");
        }
      });
    },
    
    //查询
    chaxun() {
      if (this.input == "") {
        this.$message.error('请输入')
      } else {
        this.$axios({
          url: "/vip/userLevel/list",
          params: {
            page: this.page,
            limit: "5",
            name:this.id,
          },
        }).then((res) => {
          console.log(res)
          if(res.data.code==0){
            // console.log(res.data.data[0].id);
            // this.input=res.data.data[0].id
           this.$message.success('查询成功')
           this.tableData=res.data.data.id
           this.getCon();
          }else{
            this.$message.error('查询失败')
          }
        });
      }
    },
    //状态的修改
    zhuangtai(){
      this.$axios({
        url:"/vip/userLevel/updateStatus",
        params:{
          id:"3",
          status:"0",
        },
      }).then((res)=>{
        console.log(res);
        // if( ){}
      });
    },
  },
  mounted() {
    this.getCon();
  },
};
</script>